/**
 * @intro: 保存商品信息
 */

import React, { Component } from 'react';
// import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import PageTitle from '../../../components/page-title';
import MUtil from '../../../utils/mm';
import Product from '../../../service/product-service';
import CategorySelect from './category-selector';

import './save.scss';

const _mm = new MUtil()
const _product = new Product()

class ProductDetail extends Component {
	constructor(props) {
		super(props);
		this.state = {
			id: this.props.match.params.pid,
			name: '',
			subtitle: '',
			categoryId: 0,
			parentCategoryId: 0,
			subImages: [],
			price: '',
			stock: '',
			detail: '',
			status: 1, // 这里商品状态1为在售
		};
	}

	componentDidMount() {
		this.loadPruduct()
	}

	loadPruduct() {
		// 有id的时候表示编辑功能需要表单回填
		if(this.state.id) {
			_product.getProduct(this.state.id).then(res=>{
				if(res.subImages && res.subImages.length > 0) {
					let images = res.subImages.split(',');
					res.subImages = images.map((image,key) => {
						return {
							uri: image,
							url: `${res.imageHost}${image}`,
							key: key,
						}
					})
				}
				this.setState(res)
			},errMsg=>{
				_mm.errorTips(errMsg)
			})
		}
	}


	render() {
		return (
			<div id="page-wrapper">
				<PageTitle title="商品详情" />
				<div className="form-horizontal">
					<div className="form-group">
						<label className="col-sm-2 control-label">商品名称</label>
						<div className="col-sm-5">
							<p className="form-control-static">
								{this.state.name}
							</p>
						</div>
					</div>
					<div className="form-group">
						<label className="col-sm-2 control-label">商品描述</label>
						<div className="col-sm-5">
							<p className="form-control-static">
								{this.state.subtitle}
							</p>
						</div>
					</div>
					<div className="form-group">
						<label className="col-sm-2 control-label">所属分类</label>
						<CategorySelect
							categoryId = {this.state.categoryId}
							parentCategoryId = {this.state.parentCategoryId}
							readOnly
						/>
					</div>
					<div className="form-group">
						<label className="col-sm-2 control-label">商品价格</label>
						<div className="col-sm-2">
							<div className="input-group">
								<input type="number" className="form-control"
									value={this.state.price}
									readOnly
								/>
								<span className="input-group-addon">元</span>
							</div>
						</div>
					</div>
					<div className="form-group">
						<label className="col-sm-2 control-label">商品库存</label>
						<div className="col-sm-2">
							<div className="input-group">
								<input type="number" className="form-control"
									readOnly
									value={this.state.stock}
								/>
								<span className="input-group-addon">件</span>
							</div>
						</div>
					</div>
					<div className="form-group">
						<label className="col-sm-2 control-label">商品图片</label>
						<div className="col-sm-10">
							{
								this.state.subImages && this.state.subImages.length? this.state.subImages.map((image,index) => {
									return(
										<div className='img-con'>
											<img src={image.url} key={index} alt="" />
										</div>
									)
								}): (<div>暂无图片</div>)
							}
						</div>
					</div>
					<div className="form-group">
						<label className="col-sm-2 control-label">商品详情</label>
						<div className="col-sm-10" dangerouslySetInnerHTML={{__html: this.state.detail}}>
						</div>
					</div>
				</div>
			</div>
		);
	}
}

export default ProductDetail;
